

require('./PageDbrwtxedit.styl');


import {PropTypes} from "prop-types";
import {is} from "immutable";
import {Control} from "react-keeper";
require('rc-steps/assets/index.css');
require('rc-steps/assets/iconfont.css');
import Steps, {Step} from 'rc-steps';
import Reflux from 'reflux';
import {Avatar, Boxs, Group, Scroller,TabBar, ScrollList, SearchBar,TextareaField,Button, Tab,ActionSheet} from 'saltui';
import Icon from 'salt-icon';
import moment from 'moment';
import ToastLoading from 'salt-icon/lib/ToastLoading';
import nattyStorage from 'natty-storage';
const {WithContainer} = SearchBar;
const {API_URL} = require(`./../../config/${ENV}.json`);
const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
const HBox = Boxs.HBox;
const Box = Boxs.Box;
const avatarColors = ['#78C06E', '#3BC2B5', '#78919D', '#5EC9F6', '#F6BF26'];


const { PDF_URL,File_URL} = require(`./../../config/${ENV}.json`);
const tabBarStyle = {
  borderTop: '1px solid #ccc',
  boxShadow: '0 0 1px 0 #999'
};

const tabBarItemTitleStyle = {
  lineHeight: '25px',
  borderRight: '1px solid #ccc',
  fontSize: '14px'
};
const tabBarItemTitleActiveStyle = {
  lineHeight: '25px',
  borderRight: '1px solid #ccc',
  fontSize: '14px'
};

const tabBarItemTitleStylen = {
  lineHeight: '25px',
  fontSize: '14px'
};
const tabBarItemTitleActiveStylen = {
  lineHeight: '25px',
  fontSize: '14px'
};

class Page extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      activeIndex: 0,
      yj:''
    };
    this.onShyjChange = this.onShyjChange.bind(this);
    this.onSendClick = this.onSendClick.bind(this);
  }

  onShyjChange(obj) {
    this.setState({
      yj: obj,
    })
  }

  onRouteCase() {
    Control.go('/');
  }

  onSendClick(index) {
    let t = this;
    console.log(index);
    if(index != '-1'){
      Actions.rwSend(
        {
          shyj: this.state.yj,
          shjl: index == '0' ? '审核通过' : '审核退回',

        }
      )
    }
  }

  onPdfClick(obj) {
    dd.biz.util.openLink({
      url: PDF_URL + '/generic/web/viewer.html?file=' + encodeURIComponent(PDF_URL + this.state.dbrwedit.rw.pdfUrl + '?' + this.state.dbrwedit.rw.paramName + "=" + this.state.dbrwedit.rw.glId),
      onSuccess: function (result) {
        Toast.hide(function () {
        });
      },
      onFail: function (err) {
        alert(JSON.stringify(err));
      }
    });
  }

  onShareClick(obj) {

    /*console.info(this.state.dbrwedit.rw);*/
    dd.biz.util.share({
      type: O,//分享类型，0:全部组件 默认； 1:只能分享到钉钉；2:不能分享，只有刷新按钮
      url: File_URL+'file-management/'+ this.state.dbrwedit.rw.glId+'/pdf',
      title: this.state.dbrwedit.rw.txName,
      content: this.state.dbrwedit.rw.engName,
      image: String,
      onSuccess : function() {
      },
      onFail : function(err) {}
    })
  }

  onShChange(activeIndex) {

    Control.go('/dbrwtxsh',{activeIndex});
    /*this.context.router.push(`dbrwtxsh/${activeIndex}`);*/
  }

  onPlChange(activeIndex) {
    alert('敬请期待!');
  }

  render() {

    let steps = [];

    this.state.dbrwedit.steps.map((s, i) => {
        steps.push(
          <Step
            key={i}
            status={s.status}
            title={s.title}
            description={s.description}
          />
        );
      });


    return (
      <div className="dbrwtxedit">
        <Tab activeKey={'0'}

             className="engSearchBar">
          <Tab.Item title="审核情况">
        <Group>
          <Group.List>
            <HBox vAlign="center" className="headAvatar">
              <HBox flex={1}>
                <Box style={{width:'70px'}}>
                  <Avatar name={this.state.dbrwedit.rw.tjrName} src='' size={60} colors={avatarColors}/>
                </Box>
                <Box flex={1} className="head-title">
                  <p
                    className='txrw-t-edit-head'>{this.state.dbrwedit.rw.tjrName}</p>
                  <p className='txrw-t-edit-zt'>{this.state.dbrwedit.rw.isEnd ? '已处理完毕' : '等待我处理'}</p>
                </Box>
              </HBox>
            </HBox>
          </Group.List>

          <Group.List>
              <div onClick={this.onPdfClick.bind(this)}>
                <p className='txrw-t-edit-ms txrw-t-omit'>{this.state.dbrwedit.rw.rwName}</p>

              </div>
          </Group.List>
          <Group.List>
          <HBox className="demo2-t-list-title">
            <Box flex={1} onClick={this.onShareClick.bind(this)}>
             {/* <p className='txrw-left-icon'>点击分享</p>*/}
            </Box>
            <Box onClick={this.onPdfClick.bind(this)}>
              {
                this.state.dbrwedit.rw.pdfUrl && <p className="txrw-t-edit-icon">查看文档</p> }
              {/*<p className='txrw-right-icon'>查看文档</p>*/}
            </Box>
          </HBox>
          </Group.List>
          <Group.List>
            <Box>

              <p className='txrw-t-eidt-content'>工程名称: {this.state.dbrwedit.rw.engName}</p>
              <p className='txrw-t-eidt-content'>提交时间: {this.state.dbrwedit.rw.kssj}</p>

              <p className='txrw-t-eidt-content txrw-t-eidt-content-bz'>
                申请审核或者监督系统中一些审核流程在此功能中只能看审批流程的步骤,不能进行操作!给您带来的不便请谅解! </p>
            </Box>
          </Group.List>
          <Group.List>
            <div
              style={{height: window.innerHeight -100,overflowY:'scroll',padding: '10px'}}>
              <Steps direction="vertical" style={{marginTop: '-3px' }}>
                {steps}
              </Steps>
            </div>
          </Group.List>
        </Group>
      </Tab.Item>

      <Tab.Item title="审核">
        <Group>

          <Group.List>

            <TextareaField label="" minRows={7} maxRows={15}
                           onChange={this.onShyjChange}
                           value={this.state.yj}
                           placeholder={'请输入审核意见'}
            />

{/*            <Button style={{margin:'10px'}} type="primary"
                    onClick={this.onSendClick}>确定</Button>*/}
          </Group.List>
          <Group.List>
            {this.state.dbrwedit.rw.isEnd || !this.state.dbrwedit.rw.isDingTalk ? (
                <div></div>
              )
              :
              (
                <Button style={{margin:'10px'}} type="primary"
                  onClick={() => {
                    ActionSheet.show({
                      options: ['审核通过', '退回'],
                      destructiveButtonIndex: 3,
                      message: '请选择',
                      maskClosable: false,
                    }, (index) => {
                      this.onSendClick(index);

                    });
                  }}
                >确定</Button>
              )
            }
          </Group.List>

            </Group>
          </Tab.Item>
        </Tab>
      </div>
    );
  }

  componentWillMount() {
    if(Control.state){
      Actions.rwGet(Control.state);
    }
/*    Actions.rwRouteGet(
      {
        spId: this.props.params.spId,
      }
    );*/
  }

  shouldComponentUpdate(nextProps = {}, nextState = {}) {
    const thisProps = this.props || {},
      thisState = this.state.dbrwedit || {};

    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key] || !is(thisProps[key], nextProps[key])) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key] || !is(thisState[key], nextState[key])) {
        return true;
      }
    }
    return false;
  }


}

Page.contextTypes = {
  router: PropTypes.object.isRequired,
  location: PropTypes.object.isRequired,
};

reactMixin.onClass(Page, Reflux.connect(Store, "dbrwedit"));

export default Page;

